<!DOCTYPE html>
<!--[if IE 8]>
<html lang="zh" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>管理系统</title>
    <!-- ======基础样式开始======-->
    <link href="css/bootstrap/style.default.css" rel="stylesheet">
    <!--换肤-->
    <link href="css/bootstrap/style.katniss.css" rel="stylesheet">
    <!--IE8兼容样式-->
    <link href="css/bootstrap/navigateLowerIE8.css" rel="stylesheet">
    <!-- ======基础样式结束======-->
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="js/bootstrap/html5shiv.js"></script>
    <script src="js/bootstrap/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="contentpanel">
    <h4 id="demo-search">With search</h4>

    <div class="row">
        <div class="col-sm-5">
            <select name="from[]" id="search" class="form-control" size="8" multiple="multiple">
                <option value="1" data-position="1">Item 1</option>
                <option value="2" data-position="2">Item 5</option>
                <option value="2" data-position="3">Item 2</option>
                <option value="2" data-position="4">Item 4</option>
                <option value="3" data-position="5">Item 3</option>
            </select>
        </div>

        <div class="col-sm-2">
            <div style="width:50px;margin:0 auto;" class="text-center">
                <button type="button" id="search_rightAll" class="btn btn-block m-t-10"><i class="fa fa-forward"></i></button>
                <button type="button" id="search_rightSelected" class="btn btn-block m-t-10"><i class="fa fa-chevron-right"></i></button>
                <button type="button" id="search_leftSelected" class="btn btn-block m-t-10"><i class="fa fa-chevron-left"></i></button>
                <button type="button" id="search_leftAll" class="btn btn-block m-t-10"><i class="fa fa-backward"></i></button>
            </div>
        </div>

        <div class="col-sm-5">
            <select name="to[]" id="search_to" class="form-control" size="8" multiple="multiple"></select>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <h5>HTML</h5>
<pre class="prettyprint linenums">
&lt;div class=&quot;row&quot;&gt;
	&lt;div class=&quot;col-xs-5&quot;&gt;
		&lt;select name=&quot;from[]&quot; id=&quot;search&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;
			&lt;option value=&quot;1&quot;&gt;Item 1&lt;/option&gt;
			&lt;option value=&quot;2&quot;&gt;Item 5&lt;/option&gt;
			&lt;option value=&quot;2&quot;&gt;Item 2&lt;/option&gt;
			&lt;option value=&quot;2&quot;&gt;Item 4&lt;/option&gt;
			&lt;option value=&quot;3&quot;&gt;Item 3&lt;/option&gt;
		&lt;/select&gt;
	&lt;/div&gt;

	&lt;div class=&quot;col-xs-2&quot;&gt;
		&lt;button type=&quot;button&quot; id=&quot;search_rightAll&quot; class=&quot;btn m-t-10&quot;&gt;&lt;i class=&quot;fa fa-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;search_rightSelected&quot; class=&quot;btn m-t-10&quot;&gt;&lt;i class=&quot;fa fa-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;search_leftSelected&quot; class=&quot;btn m-t-10&quot;&gt;&lt;i class=&quot;fa fa-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;search_leftAll&quot; class=&quot;btn m-t-10&quot;&gt;&lt;i class=&quot;fa fa-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
	&lt;/div&gt;

	&lt;div class=&quot;col-xs-5&quot;&gt;
		&lt;select name=&quot;to[]&quot; id=&quot;search_to&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
	&lt;/div&gt;
&lt;/div&gt;
</pre>
            <h5>JavaScript</h5>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
jQuery(document).ready(function($) {
	$(&#39;#search&#39;).multiselect({
		search: {
			left: &#39;&lt;input type=&quot;text&quot; name=&quot;q&quot; class=&quot;form-control&quot; placeholder=&quot;Search...&quot; /&gt;&#39;,
			right: &#39;&lt;input type=&quot;text&quot; name=&quot;q&quot; class=&quot;form-control&quot; placeholder=&quot;Search...&quot; /&gt;&#39;,
		}
	});
});
&lt;/script&gt;
</pre>
        </div>
    </div>

    <h4 id="demo-keep-rendering-sort">Keep rendering sort</h4>

    <div class="row">
        <div class="col-xs-5">
            <select name="from[]" id="keepRenderingSort" class="form-control" size="8" multiple="multiple">
                <option value="1" data-position="1">Item 1</option>
                <option value="2" data-position="2">Item 5</option>
                <option value="2" data-position="3">Item 2</option>
                <option value="2" data-position="4">Item 4</option>
                <option value="3" data-position="5">Item 3</option>
            </select>
        </div>

        <div class="col-xs-2">
            <div style="width:50px;margin:0 auto;" class="text-center">
                <button type="button" id="keepRenderingSort_rightAll" class="btn btn-block m-t-10"><i class="fa fa-forward"></i></button>
                <button type="button" id="keepRenderingSort_rightSelected" class="btn btn-block m-t-10"><i class="fa fa-chevron-right"></i></button>
                <button type="button" id="keepRenderingSort_leftSelected" class="btn btn-block m-t-10"><i class="fa fa-chevron-left"></i></button>
                <button type="button" id="keepRenderingSort_leftAll" class="btn btn-block m-t-10"><i class="fa fa-backward"></i></button>
            </div>
        </div>

        <div class="col-xs-5">
            <select name="to[]" id="keepRenderingSort_to" class="form-control" size="8" multiple="multiple"></select>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <h5>HTML</h5>
<pre class="prettyprint linenums">
&lt;div class=&quot;row&quot;&gt;
	&lt;div class=&quot;col-xs-5&quot;&gt;
		&lt;select name=&quot;from[]&quot; id=&quot;keepRenderingSort&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;
			&lt;option value=&quot;1&quot;&gt;Item 1&lt;/option&gt;
			&lt;option value=&quot;2&quot;&gt;Item 5&lt;/option&gt;
			&lt;option value=&quot;2&quot;&gt;Item 2&lt;/option&gt;
			&lt;option value=&quot;2&quot;&gt;Item 4&lt;/option&gt;
			&lt;option value=&quot;3&quot;&gt;Item 3&lt;/option&gt;
		&lt;/select&gt;
	&lt;/div&gt;

	&lt;div class=&quot;col-xs-2&quot;&gt;
		&lt;button type=&quot;button&quot; id=&quot;keepRenderingSort_rightAll&quot; class=&quot;btn m-t-10&quot;&gt;&lt;i class=&quot;fa fa-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;keepRenderingSort_rightSelected&quot; class=&quot;btn m-t-10&quot;&gt;&lt;i class=&quot;fa fa-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;keepRenderingSort_leftSelected&quot; class=&quot;btn m-t-10&quot;&gt;&lt;i class=&quot;fa fa-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;keepRenderingSort_leftAll&quot; class=&quot;btn m-t-10&quot;&gt;&lt;i class=&quot;fa fa-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
	&lt;/div&gt;

	&lt;div class=&quot;col-xs-5&quot;&gt;
		&lt;select name=&quot;to[]&quot; id=&quot;keepRenderingSort_to&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
	&lt;/div&gt;
&lt;/div&gt;
</pre>
            <h5>JavaScript</h5>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
jQuery(document).ready(function($) {
	$(&#39;#multiselect&#39;).multiselect({
		keepRenderingSort: true
	});
});
&lt;/script&gt;
</pre>
        </div>
    </div>

    <h4 id="demo-undo-redo">Undo / Redo</h4>

    <div class="row">
        <div class="col-xs-5">
            <select name="from[]" id="undo_redo" class="form-control" size="13" multiple="multiple">
                <option value="1">C++</option>
                <option value="2">C#</option>
                <option value="3">Haskell</option>
                <option value="4">Java</option>
                <option value="5">JavaScript</option>
                <option value="6">Lisp</option>
                <option value="7">Lua</option>
                <option value="8">MATLAB</option>
                <option value="9">NewLISP</option>
                <option value="10">PHP</option>
                <option value="11">Perl</option>
                <option value="12">SQL</option>
                <option value="13">Unix shell</option>
            </select>
        </div>

        <div class="col-xs-2">
            <div style="width:70px;margin:0 auto;">
            <button type="button" id="undo_redo_undo" class="btn btn-block btn-primary m-t-10">undo</button>
            <button type="button" id="undo_redo_rightAll" class="btn btn-block btn-default m-t-10"><i class="fa fa-forward"></i></button>
            <button type="button" id="undo_redo_rightSelected" class="btn btn-block btn-default m-t-10"><i class="fa fa-chevron-right"></i></button>
            <button type="button" id="undo_redo_leftSelected" class="btn btn-block btn-default m-t-10"><i class="fa fa-chevron-left"></i></button>
            <button type="button" id="undo_redo_leftAll" class="btn btn-block btn-default m-t-10"><i class="fa fa-backward"></i></button>
            <button type="button" id="undo_redo_redo" class="btn btn-block btn-warning m-t-10">redo</button>
                </div>
        </div>

        <div class="col-xs-5">
            <select name="to[]" id="undo_redo_to" class="form-control" size="13" multiple="multiple"></select>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <h5>HTML</h5>
<pre class="prettyprint linenums">
&lt;div class=&quot;row&quot;&gt;
	&lt;div class=&quot;col-xs-5&quot;&gt;
		&lt;select name=&quot;from[]&quot; id=&quot;undo_redo&quot; class=&quot;form-control&quot; size=&quot;13&quot; multiple=&quot;multiple&quot;&gt;
			&lt;option value=&quot;1&quot;&gt;C++&lt;/option&gt;
			&lt;option value=&quot;2&quot;&gt;C#&lt;/option&gt;
			&lt;option value=&quot;3&quot;&gt;Haskell&lt;/option&gt;
			&lt;option value=&quot;4&quot;&gt;Java&lt;/option&gt;
			&lt;option value=&quot;5&quot;&gt;JavaScript&lt;/option&gt;
			&lt;option value=&quot;6&quot;&gt;Lisp&lt;/option&gt;
			&lt;option value=&quot;7&quot;&gt;Lua&lt;/option&gt;
			&lt;option value=&quot;8&quot;&gt;MATLAB&lt;/option&gt;
			&lt;option value=&quot;9&quot;&gt;NewLISP&lt;/option&gt;
			&lt;option value=&quot;10&quot;&gt;PHP&lt;/option&gt;
			&lt;option value=&quot;11&quot;&gt;Perl&lt;/option&gt;
			&lt;option value=&quot;12&quot;&gt;SQL&lt;/option&gt;
			&lt;option value=&quot;13&quot;&gt;Unix shell&lt;/option&gt;
		&lt;/select&gt;
	&lt;/div&gt;

	&lt;div class=&quot;col-xs-2&quot;&gt;
		&lt;button type=&quot;button&quot; id=&quot;undo_redo_undo&quot; class=&quot;btn btn-primary m-t-10&quot;&gt;undo&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;undo_redo_rightAll&quot; class=&quot;btn btn-block btn-default m-t-10&quot;&gt;&lt;i class=&quot;fa fa-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;undo_redo_rightSelected&quot; class=&quot;btn btn-block btn-default m-t-10&quot;&gt;&lt;i class=&quot;fa fa-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;undo_redo_leftSelected&quot; class=&quot;btn btn-block btn-default m-t-10&quot;&gt;&lt;i class=&quot;fa fa-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;undo_redo_leftAll&quot; class=&quot;btn btn-block btn-default m-t-10&quot;&gt;&lt;i class=&quot;fa fa-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;undo_redo_redo&quot; class=&quot;btn btn-warning m-t-10&quot;&gt;redo&lt;/button&gt;
	&lt;/div&gt;

	&lt;div class=&quot;col-xs-5&quot;&gt;
		&lt;select name=&quot;to[]&quot; id=&quot;undo_redo_to&quot; class=&quot;form-control&quot; size=&quot;13&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
	&lt;/div&gt;
&lt;/div&gt;
</pre>
            <h5>JavaScript</h5>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
jQuery(document).ready(function($) {
	$(&#39;#undo_redo&#39;).multiselect();
});
&lt;/script&gt;
</pre>
        </div>
    </div>

    <h4 id="demo-multiple-destinations">Multiple destinations</h4>

    <div class="row">
        <div class="col-xs-5">
            <select name="from[]" id="multi_d" class="form-control" size="26" multiple="multiple">
                <option value="1">C++</option>
                <option value="2">C#</option>
                <option value="3">Haskell</option>
                <option value="4">Java</option>
                <option value="5">JavaScript</option>
                <option value="6">Lisp</option>
                <option value="7">Lua</option>
                <option value="8">MATLAB</option>
                <option value="9">NewLISP</option>
                <option value="10">PHP</option>
                <option value="11">Perl</option>
                <option value="12">SQL</option>
                <option value="13">Unix shell</option>
            </select>
        </div>

        <div class="col-xs-2">
            <div style="width:50px;margin:0 auto;overflow:hidden;" class="text-center">
                <button type="button" id="multi_d_rightAll" class="btn btn-block btn-success m-t-10" style="margin-top: 20px;"><i class="fa fa-forward"></i></button>
                <button type="button" id="multi_d_rightSelected" class="btn btn-block btn-success m-t-10"><i class="fa fa-chevron-right"></i></button>
                <button type="button" id="multi_d_leftSelected" class="btn btn-block btn-success m-t-10"><i class="fa fa-chevron-left"></i></button>
                <button type="button" id="multi_d_leftAll" class="btn btn-block btn-success m-t-10"><i class="fa fa-backward"></i></button>

                <hr style="margin: 30px 0 30px;" />

                <button type="button" id="multi_d_rightAll_2" class="btn btn-block btn-primary m-t-10"><i class="fa fa-forward"></i></button>
                <button type="button" id="multi_d_rightSelected_2" class="btn btn-block btn-primary m-t-10"><i class="fa fa-chevron-right"></i></button>
                <button type="button" id="multi_d_leftSelected_2" class="btn btn-block btn-primary m-t-10"><i class="fa fa-chevron-left"></i></button>
                <button type="button" id="multi_d_leftAll_2" class="btn btn-block btn-primary m-t-10"><i class="fa fa-backward"></i></button>
            </div>
        </div>

        <div class="col-xs-5">
            <b class="badge badge-success">Known languages</b>
            <select name="to[]" id="multi_d_to" class="form-control" size="8" multiple="multiple">
                <option value="1">C++</option>
                <option value="2">C#</option>
            </select>

            <br/><hr/><br/>

            <b class="badge badge-primary">I want to learn</b>
            <select name="to_2[]" id="multi_d_to_2" class="form-control" size="8" multiple="multiple">
                <option value="12">SQL</option>
                <option value="13">Unix shell</option>
            </select>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <h5>HTML</h5>
<pre class="prettyprint linenums">
&lt;div class=&quot;row&quot;&gt;
	&lt;div class=&quot;col-xs-5&quot;&gt;
		&lt;select name=&quot;from[]&quot; id=&quot;multi_d&quot; class=&quot;form-control&quot; size=&quot;26&quot; multiple=&quot;multiple&quot;&gt;
			&lt;option value=&quot;1&quot;&gt;C++&lt;/option&gt;
			&lt;option value=&quot;2&quot;&gt;C#&lt;/option&gt;
			&lt;option value=&quot;3&quot;&gt;Haskell&lt;/option&gt;
			&lt;option value=&quot;4&quot;&gt;Java&lt;/option&gt;
			&lt;option value=&quot;5&quot;&gt;JavaScript&lt;/option&gt;
			&lt;option value=&quot;6&quot;&gt;Lisp&lt;/option&gt;
			&lt;option value=&quot;7&quot;&gt;Lua&lt;/option&gt;
			&lt;option value=&quot;8&quot;&gt;MATLAB&lt;/option&gt;
			&lt;option value=&quot;9&quot;&gt;NewLISP&lt;/option&gt;
			&lt;option value=&quot;10&quot;&gt;PHP&lt;/option&gt;
			&lt;option value=&quot;11&quot;&gt;Perl&lt;/option&gt;
			&lt;option value=&quot;12&quot;&gt;SQL&lt;/option&gt;
			&lt;option value=&quot;13&quot;&gt;Unix shell&lt;/option&gt;
		&lt;/select&gt;
	&lt;/div&gt;

	&lt;div class=&quot;col-xs-2&quot;&gt;
		&lt;button type=&quot;button&quot; id=&quot;multi_d_rightAll&quot; class=&quot;btn btn-block btn-default m-t-10&quot; style=&quot;margin-top: 20px;&quot;&gt;&lt;i class=&quot;fa fa-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;multi_d_rightSelected&quot; class=&quot;btn btn-block btn-default m-t-10&quot;&gt;&lt;i class=&quot;fa fa-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;multi_d_leftSelected&quot; class=&quot;btn btn-block btn-default m-t-10&quot;&gt;&lt;i class=&quot;fa fa-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;multi_d_leftAll&quot; class=&quot;btn btn-block btn-default m-t-10&quot;&gt;&lt;i class=&quot;fa fa-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;

		&lt;hr style=&quot;margin: 40px 0 60px;&quot; /&gt;

		&lt;button type=&quot;button&quot; id=&quot;multi_d_rightAll_2&quot; class=&quot;btn btn-block btn-default m-t-10&quot;&gt;&lt;i class=&quot;fa fa-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;multi_d_rightSelected_2&quot; class=&quot;btn btn-block btn-default m-t-10&quot;&gt;&lt;i class=&quot;fa fa-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;multi_d_leftSelected_2&quot; class=&quot;btn btn-block btn-default m-t-10&quot;&gt;&lt;i class=&quot;fa fa-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		&lt;button type=&quot;button&quot; id=&quot;multi_d_leftAll_2&quot; class=&quot;btn btn-block btn-default m-t-10&quot;&gt;&lt;i class=&quot;fa fa-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
	&lt;/div&gt;

	&lt;div class=&quot;col-xs-5&quot;&gt;
		&lt;b&gt;Known languages&lt;/b&gt;
		&lt;select name=&quot;to[]&quot; id=&quot;multi_d_to&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;

		&lt;br/&gt;&lt;hr/&gt;&lt;br/&gt;

		&lt;b&gt;I want to learn&lt;/b&gt;
		&lt;select name=&quot;to_2[]&quot; id=&quot;multi_d_to_2&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
	&lt;/div&gt;
&lt;/div&gt;
</pre>
            <h5>JavaScript</h5>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
jQuery(document).ready(function($) {
	$(&#39;#multi_d&#39;).multiselect({
		right: &#39;#multi_d_to, #multi_d_to_2&#39;,
		rightSelected: &#39;#multi_d_rightSelected, #multi_d_rightSelected_2&#39;,
		leftSelected: &#39;#multi_d_leftSelected, #multi_d_leftSelected_2&#39;,
		rightAll: &#39;#multi_d_rightAll, #multi_d_rightAll_2&#39;,
		leftAll: &#39;#multi_d_leftAll, #multi_d_leftAll_2&#39;,

		moveToRight: function(Multiselect, options, event, silent, skipStack) {
			var button = $(event.currentTarget).attr(&#39;id&#39;);

			if (button == &#39;multi_d_rightSelected&#39;) {
				var left_options = Multiselect.left.find(&#39;option:selected&#39;);
				Multiselect.right.eq(0).append(left_options);

				if ( typeof Multiselect.callbacks.sort == &#39;function&#39; &amp;&amp; !silent ) {
					Multiselect.right.eq(0).find(&#39;option&#39;).sort(Multiselect.callbacks.sort).appendTo(Multiselect.right.eq(0));
				}
			} else if (button == &#39;multi_d_rightAll&#39;) {
				var left_options = Multiselect.left.find(&#39;option&#39;);
				Multiselect.right.eq(0).append(left_options);

				if ( typeof Multiselect.callbacks.sort == &#39;function&#39; &amp;&amp; !silent ) {
					Multiselect.right.eq(0).find(&#39;option&#39;).sort(Multiselect.callbacks.sort).appendTo(Multiselect.right.eq(0));
				}
			} else if (button == &#39;multi_d_rightSelected_2&#39;) {
				var left_options = Multiselect.left.find(&#39;option:selected&#39;);
				Multiselect.right.eq(1).append(left_options);

				if ( typeof Multiselect.callbacks.sort == &#39;function&#39; &amp;&amp; !silent ) {
					Multiselect.right.eq(1).find(&#39;option&#39;).sort(Multiselect.callbacks.sort).appendTo(Multiselect.right.eq(1));
				}
			} else if (button == &#39;multi_d_rightAll_2&#39;) {
				var left_options = Multiselect.left.find(&#39;option&#39;);
				Multiselect.right.eq(1).append(left_options);

				if ( typeof Multiselect.callbacks.sort == &#39;function&#39; &amp;&amp; !silent ) {
					Multiselect.right.eq(1).eq(1).find(&#39;option&#39;).sort(Multiselect.callbacks.sort).appendTo(Multiselect.right.eq(1));
				}
			}
		},

		moveToLeft: function(Multiselect, options, event, silent, skipStack) {
			var button = $(event.currentTarget).attr(&#39;id&#39;);

			if (button == &#39;multi_d_leftSelected&#39;) {
				var right_options = Multiselect.right.eq(0).find(&#39;option:selected&#39;);
				Multiselect.left.append(right_options);

				if ( typeof Multiselect.callbacks.sort == &#39;function&#39; &amp;&amp; !silent ) {
					Multiselect.left.find(&#39;option&#39;).sort(Multiselect.callbacks.sort).appendTo(Multiselect.left);
				}
			} else if (button == &#39;multi_d_leftAll&#39;) {
				var right_options = Multiselect.right.eq(0).find(&#39;option&#39;);
				Multiselect.left.append(right_options);

				if ( typeof Multiselect.callbacks.sort == &#39;function&#39; &amp;&amp; !silent ) {
					Multiselect.left.find(&#39;option&#39;).sort(Multiselect.callbacks.sort).appendTo(Multiselect.left);
				}
			} else if (button == &#39;multi_d_leftSelected_2&#39;) {
				var right_options = Multiselect.right.eq(1).find(&#39;option:selected&#39;);
				Multiselect.left.append(right_options);

				if ( typeof Multiselect.callbacks.sort == &#39;function&#39; &amp;&amp; !silent ) {
					Multiselect.left.find(&#39;option&#39;).sort(Multiselect.callbacks.sort).appendTo(Multiselect.left);
				}
			} else if (button == &#39;multi_d_leftAll_2&#39;) {
				var right_options = Multiselect.right.eq(1).find(&#39;option&#39;);
				Multiselect.left.append(right_options);

				if ( typeof Multiselect.callbacks.sort == &#39;function&#39; &amp;&amp; !silent ) {
					Multiselect.left.find(&#39;option&#39;).sort(Multiselect.callbacks.sort).appendTo(Multiselect.left);
				}
			}
		}
	});
});
&lt;/script&gt;
</pre>
        </div>
    </div>

</div>
<script src="js/bootstrap/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/bootstrap/modernizr.min.js"></script>
<script src="js/bootstrap/retina.min.js"></script>
<script src="js/util/util.js"></script>

<!--仅本页使用的js-->
<script src="js/multiselect/multiselect.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // make code pretty
        window.prettyPrint && prettyPrint();

        if ( window.location.hash ) {
            scrollTo(window.location.hash);
        }

        $('.nav').on('click', 'a', function(e) {
            scrollTo($(this).attr('href'));
        });

        $('#multiselect').multiselect();

        $('[name="q"]').on('keyup', function(e) {
            var search = this.value;
            var $options = $(this).next('select').find('option');

            $options.each(function(i, option) {
                if (option.text.indexOf(search) > -1) {
                    $(option).show();
                } else {
                    $(option).hide();
                }
            });
        });

        $('#search').multiselect({
            search: {
                left: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
                right: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
            }
        });

        $('.multiselect').multiselect();
        $('.js-multiselect').multiselect({
            right: '#js_multiselect_to_1',
            rightAll: '#js_right_All_1',
            rightSelected: '#js_right_Selected_1',
            leftSelected: '#js_left_Selected_1',
            leftAll: '#js_left_All_1'
        });

        $('#keepRenderingSort').multiselect({
            keepRenderingSort: true
        });

        $('#undo_redo').multiselect();

        $('#multi_d').multiselect({
            right: '#multi_d_to, #multi_d_to_2',
            rightSelected: '#multi_d_rightSelected, #multi_d_rightSelected_2',
            leftSelected: '#multi_d_leftSelected, #multi_d_leftSelected_2',
            rightAll: '#multi_d_rightAll, #multi_d_rightAll_2',
            leftAll: '#multi_d_leftAll, #multi_d_leftAll_2',

            moveToRight: function(Multiselect, options, event, silent, skipStack) {
                var button = $(event.currentTarget).attr('id');

                if (button == 'multi_d_rightSelected') {
                    var left_options = Multiselect.left.find('option:selected');
                    Multiselect.right.eq(0).append(left_options);

                    if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
                        Multiselect.right.eq(0).find('option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.right.eq(0));
                    }
                } else if (button == 'multi_d_rightAll') {
                    var left_options = Multiselect.left.find('option');
                    Multiselect.right.eq(0).append(left_options);

                    if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
                        Multiselect.right.eq(0).find('option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.right.eq(0));
                    }
                } else if (button == 'multi_d_rightSelected_2') {
                    var left_options = Multiselect.left.find('option:selected');
                    Multiselect.right.eq(1).append(left_options);

                    if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
                        Multiselect.right.eq(1).find('option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.right.eq(1));
                    }
                } else if (button == 'multi_d_rightAll_2') {
                    var left_options = Multiselect.left.find('option');
                    Multiselect.right.eq(1).append(left_options);

                    if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
                        Multiselect.right.eq(1).eq(1).find('option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.right.eq(1));
                    }
                }
            },

            moveToLeft: function(Multiselect, options, event, silent, skipStack) {
                var button = $(event.currentTarget).attr('id');

                if (button == 'multi_d_leftSelected') {
                    var right_options = Multiselect.right.eq(0).find('option:selected');
                    Multiselect.left.append(right_options);

                    if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
                        Multiselect.left.find('option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.left);
                    }
                } else if (button == 'multi_d_leftAll') {
                    var right_options = Multiselect.right.eq(0).find('option');
                    Multiselect.left.append(right_options);

                    if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
                        Multiselect.left.find('option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.left);
                    }
                } else if (button == 'multi_d_leftSelected_2') {
                    var right_options = Multiselect.right.eq(1).find('option:selected');
                    Multiselect.left.append(right_options);

                    if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
                        Multiselect.left.find('option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.left);
                    }
                } else if (button == 'multi_d_leftAll_2') {
                    var right_options = Multiselect.right.eq(1).find('option');
                    Multiselect.left.append(right_options);

                    if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
                        Multiselect.left.find('option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.left);
                    }
                }
            }
        });
    });

    function scrollTo( id ) {
        if ( $(id).length ) {
            $('html,body').animate({scrollTop: $(id).offset().top - 40},'slow');
        }
    }
</script>
</body>
</html>